<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
  #stage {
    width: 805px;
    height: 300px;
  }

  #container {
    width: 500px;
    height: 281px;
    display: inline-block;
  }

  img {
    position: absolute;
    -webkit-transition: all 1s ease-in-out;
  }

  .disappear {
    -webkit-transform: scale(0, 0);
    -webkit-transform-origin: bottom left;
    opacity: 0;
  }

  .show {
    -webkit-transform: scale(1, 1);
    -webkit-transform-origin: top right;
    opacity: 1;
  }

  .scale {
    -webkit-transform: scale(0, 0);
    opacity: 0;
  }

  .btn-left-container {
    display: inline-block;
    height: 281px;
    width: 60px;
    margin:0 20px;
  }

  .btn-left-container:hover {
    background-color: #e6e6e6;
  }

  .img-left-btn {
    float: left;
    width: 40px;
    height: 72px;
    margin-left: 10px;
    margin-top: 110px;
    background: url(img/1.png) no-repeat 0 -87px;
  }

  .img-left-btn:hover {
    background-position: -46px -87px;
    background-color: #e6e6e6;
  }

  .btn-right-container {
    display: inline-block;
    height: 281px;
    width: 60px;
    margin: 0 20px;
  }

  .btn-right-container:hover {
    background-color: #e6e6e6;
  }

  .img-right-btn {
    float: right;
    width: 40px;
    height: 72px;
    margin-right: 10px;
    margin-top: 110px;
    background: url(img/1.png) no-repeat 0 0;
  }

  .img-right-btn:hover {
    background-position: -46px 0;
    background-color: #e6e6e6;
  }
</style>

<div id='stage'>
  <div class='btn-left-container'>
    <span class='img-left-btn'>
    </span>
  </div>
  <div id ='container'>
    <img src='img/img0.png' class='scale' />
    <img src='img/img1.png' class='scale' />
    <img src='img/img2.png' class='scale' />
    <img src='img/img3.png' class='scale' />
    <img src='img/img4.png' class='scale' />
    <img src='img/img5.png' class='scale' />
    <img src='img/img6.png' class='scale' />
    <img src='img/img7.png' class='scale' />
    <img src='img/img8.png' />
  </div>
  <div class='btn-right-container'>
    <span class='img-right-btn'>
    </span>
  </div>
</div>

<script type="text/javascript">
  var imgs = document.getElementsByTagName('img');
  var index = imgs.length - 1;
  var btn = document.getElementsByClassName('img-right-btn')[0];
  btn.onclick = function() {
    if(index === 0) return;
    var img = imgs[eval(index)];
    img.className = 'disappear';
    index--;
    img = imgs[eval(index)];
    img.className = 'show';
  };

  btn = document.getElementsByClassName('img-left-btn')[0];
  btn.onclick = function() {
    if(index === 8) return;
    var img = imgs[eval(index)];
    img.className = 'scale';
    index++;
    img = imgs[eval(index)];
    img.className = 'show';
  };
</script>
